<template>
  <el-backtop :right="100" :bottom="100" />
  <div>
    <div style="display: flex;grid-gap: 30px">
      <div style="margin: 20px 0;width:100%">
        <div style="padding-bottom: 30px;color: #bd3725;font-size: 30px;">
          <b>鲜花展示</b>
        </div>

        <el-row :gutter="20">
          <el-col :span="6" v-for="record in flowerRecords" :key="record.imageUrl" style="margin-bottom: 30px; text-align: center;">
            <a :href="'/product/' + record.flowerId">
              <div class="flower-box">
                <img :src="record.imageUrl" style="width: 250px; height: 220px; border-radius: 5%;" />
              </div>
            </a>
          </el-col>
        </el-row>
        <div style="padding-bottom: 30px;color: #bd3725;font-size: 30px;">
          <b>鲜花介绍</b>
        </div>
        <!--      需要实现交互-->
        <div class="demo-collapse" style="margin-left: 10px;">
          <el-collapse v-model="activeNames" @change="handleChange"  :span="6" v-for="recordd in flowerRecords" :key="recordd.flowerId">
            <el-collapse-item :title="recordd.flowerName" name="1">
              <div>
                花语：{{recordd.flowerLanguage}}
              </div>
              <div>
                详细：{{recordd.description}}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import request from "@/utils/request"

export default {
  data() {
    return {
      flowerRecords: [] // 用于存储从后端获取的花卉记录
    };
  },
  created() {
    this.fetchFlowerRecords();
  },
  methods: {
    async fetchFlowerRecords() {
      request.get("/flower/page",{
        params: {
          pageSize: 8
        }
      }).then(res => {
        this.flowerRecords = res.data.records
        console.log(this.flowerRecords)
      })
    }
  }
};
</script>

<style scoped>
b {
  margin-left: 20px;
}

.flower-box {
  overflow: hidden;
}

.flower-box:hover img {
  scale: 1.1;
}

.flower-box img {
  transition: all 0.6s;
}

.demo-collapse div {
  font-size: 20px;
  color: #bd3725;
  font-family: 新宋体;
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>


